<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="resource/js/vue.js"></script>
</head>
<body>
<template id="child-template">
    <input v-model="msg">
    <button v-on:click="notify">Dispatch Event</button>
</template>
<div id="events-example">
    <p>Message: {{messages | json}}</p>
    <child></child>
</div>
<script>
    Vue.component('child', {
        template: '#child-template',
        data: function(){
            return {msg: 'hello'}
        },
        methods:{
            notify: function(){
                if(this.msg.trim()){
                    this.$dispatch('child-msg', this.msg);
                    this.msg = '';
                }
            }
        }
    });
    var parent = new Vue({
        el: '#events-example',
        data: {
            messages: []
        },
        events: {
            'child-msg': function(msg){
                this.messages.push(msg);
            }
        }
    })

</script>
</body>
</html>